<template>
	<view class="content">
		<view class="list">
			<view class="item" v-for="(item,index) in data.list" :key="index">
				<!-- <img class="xx" src="../../../static/img/img/xx.png" alt=""> -->

				<view class="flex-align-center">
					<text class="title">{{item.name}}</text>
					<view class="ts-dc" v-if="data.type==2">特殊订场</view>
				</view>
				<text class="info">{{item.name}}｜{{item.type.value}}｜{{item.useDay.value}}
					{{item.useDay.siteDate}}</text>
				<view class="detail flex-justify-s">
					<text class="time">{{item.timeIntervalStart}}-{{item.timeIntervalEnd}}</text>
					<text class="jiage">¥{{item.price}}</text>
				</view>
				<view class="quanyi flex-align-center">
					<img class="tuikuan" src="../../../static/img/img/tuikuan.png" alt="">
					<text>不支持退款</text>
				</view>
			</view>
		</view>
		<view class="lianxi-b">
			<view class="lianxi ">
				<view class="item flex-justify-s">
					<text class="title-left">联系人</text>
					<text class="text-right">{{data.info.userName}}</text>
				</view>
				<view class="item flex-justify-s">
					<text class="title-left">联系电话</text>
					<text class="text-right">{{data.info.phone}}</text>
				</view>
			</view>
		</view>

		<view class="btn-b flex-align-end">
			<view class=" heji-box">
				<text class="heji">合计：</text>
				<view class="">
					<text class="fuhao">￥</text>
					<text class="jiae">{{data.info.amount}}</text>
				</view>
			</view>
			<view class="blue-btn" @click="payment">立即支付</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		chooseSiteRecordList,
		pay
	} from '../../../requestApi/api.js';
	const data = ref({
		ids: [],
		info: {},
		list: [],
		type: 1, //1普通场 2特殊场
	})
	onLoad((e) => {
		data.value.ids = JSON.parse(e.ids);
		data.value.type = e.type;
		getList();
	})
	const payment = () => {
		pay({
			sitePriceRecordIds: data.value.type == 1 ? data.value.ids : [],
			siteSpecialRecordId: data.value.type == 2 ? data.value.ids : '',
			sourceId: data.value.list[0].siteId,
			book: data.value.list[0].book.code,
			orderType: 4
		}).then(res => {
			// uni.switchTab({
			// 	url:'/pages/tabbar/order/order'
			// })
			// return;
			let resData = res.data.jsonObject;
			uni.requestPayment({
				timeStamp: '' + resData.timeStamp,
				nonceStr: resData.nonceStr,
				package: resData.package,
				signType: resData.signType,
				paySign: resData.paySign,
				success(result) {
					console.log(result)
					uni.switchTab({
						url: '/pages/tabbar/order/order'
					})
				},
				fail(e) {
					// console.log('err:', e)
					uni.showToast({
						icon: 'error',
						title: '支付失败'
					})
				}
			})

		})
	};
	const getList = () => {
		chooseSiteRecordList({
			ids: data.value.ids
		}).then(res => {
			let sum = 0;
			res.data.specialBookInfos.forEach(item => {
				sum += item.price;
			})
			res.data.amount = sum;
			data.value.info = res.data;
			data.value.list = res.data.specialBookInfos;
		})
	};
</script>

<style lang="scss">
	.content {
		padding-bottom: 200rpx;

		.list {
			padding: 28rpx 58rpx;

			.item {
				width: 100%;
				height: 238rpx;
				background: #F8F8F8;
				border-radius: 20rpx;
				padding: 30rpx 28rpx 0 38rpx;
				margin-bottom: 20rpx;
				position: relative;

				.xx {
					width: 28rpx;
					height: 28rpx;
					position: absolute;
					top: 24rpx;
					right: 28rpx;
				}

				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #2C2C2C;
				}

				.ts-dc {
					width: 112rpx;
					height: 42rpx;
					border: 2rpx solid #B5BACD;
					border-radius: 20rpx;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 42rpx;
					color: #2C2C2C;
					text-align: center;
					margin-left: 34rpx;
				}

				.info {
					display: block;
					font-size: 24rpx;
					color: #2C2C2C;
					margin-top: 16rpx;
				}

				.detail {
					border-bottom: 2rpx solid rgba(181, 186, 205, .25);
					margin-top: 16rpx;
					padding-bottom: 10rpx;

					.time {
						font-size: 32rpx;
						font-weight: bold;
						color: #2C2C2C;
					}

					.jiage {
						font-size: 32rpx;
						color: #3C66F6;
						font-weight: bold;
						// letter-spacing: -4rpx;
					}
				}

				.quanyi {
					margin-top: 8rpx;

					.tuikuan {
						width: 20rpx;
						height: 20rpx;
						margin-right: 8rpx;
					}

					font-size: 18rpx;
					color: #B5BACD;
				}

			}
		}

		.lianxi-b {
			padding: 0 58rpx;

			.lianxi {
				width: 100%;
				height: 182rpx;
				background: rgba(248, 248, 248, 1);
				padding: 30rpx 40rpx;

				.item {
					margin-bottom: 38rpx;
				}

				.title-left {
					font-size: 28rpx;
					font-weight: bold;
					color: #1D2228;
				}

				.text-right {
					font-size: 28rpx;
					color: #1D2228;
				}
			}

		}
	}

	.heji-box {
		padding-left: 68rpx;

		.heji {
			font-size: 32rpx;
			font-weight: bold;
			color: #2C2C2C;
		}

		.fuhao {
			font-size: 48rpx;
			color: #F26D61;
			font-weight: bold;
			letter-spacing: -4rpx;
		}

		.jiae {
			font-size: 72rpx;
			color: #F26D61;
			letter-spacing: -4rpx;
			font-weight: bold;
			line-height: 80rpx;
		}
	}

	.btn-b {
		padding-bottom: 26rpx;
	}
</style>